<script setup lang="ts">

import {message} from "ant-design-vue";
import {getCurrentInstance} from "vue";
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import KPIChart from "~/contentScripts/views/sycm/item_monitor/SycmItemAnalysisKPI/KPIChart.vue";
import {SYCMItemLists, SycmItemMonitor} from "~/contentScripts/views/sycm/item_monitor/SycmItemMonitor";
import User from "~/contentScripts/views/tao/list/components/user.vue";
import {isLogin} from "~/logic";
import {SycmTableUtils} from "~/utils/sycm/SycmTableUtils";

const loading = ref<boolean>(false);
const loginVisible = ref<boolean>(false);
const visible = ref<boolean>(false);
const showZs = ref<boolean>(false);
const dataSource = ref<Array<any>>([]);
const items = ref<SYCMItemLists>();
const columns = ref<Array<any>>([]);
/**
 * 计算表格列
 */
const calcColumns = () => {
  columns.value = [
    {
      dataIndex: 'item',
      title: '商品名称',
      width: 300,
      dataType: 'product',
      fixed: 'left',
      sorter: (a: any, b: any) => a.item.title.localeCompare(b.item.title),
      dataField: {
        item_pic: 'item.pictUrl',
        item_url: 'item.detailUrl',
        item_title: 'item.title',
      }
    },
    {
      dataIndex: 'type',
      title: '类型',
      width: 100,
      fixed: 'left',
      sorter: (a: any, b: any) => a.type.localeCompare(b.type),
      dataType: 'custom',
      slot: 'type'
    },
    {
      dataIndex: "keyword.value",
      title: "关键字",
      // fixed: 'left',
      // width: 140,
      sorter: (a: any, b: any) => a.fullDate.localeCompare(b.keyword.value),
    },
    {
      dataIndex: 'tradeIndex.value',
      title: showZs.value ? '交易指数' : '交易金额',
      sorter: (a: any, b: any) => a.tradeIndex.value - b.tradeIndex.value,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        if (text === null) {
          return '-';
        }
        return SycmTableUtils.tranNumber(showZs.value, text);
      }
    },
    {
      dataIndex: 'uv.value',
      title: '访客数',
      sorter: (a: any, b: any) => a.uv.value - b.uv.value,
      align: 'right',
    },
    {
      dataIndex: 'uvValue.value',
      title: 'UV价值',
      sorter: (a: any, b: any) => a.uvValue.value - b.uvValue.value,
      align: 'right',
    },
  ]
}
const calcDataSource = () => {
  dataSource.value = [];
  if (!items.value) {
    return;
  }
  // 判断 本品 竞品1 竞品2 那个keywordTableData最长
  const length = Math.max(
    items.value?.item?.keywordTableData?.length || 0,
    items.value?.item1?.keywordTableData?.length || 0,
    items.value?.item2?.keywordTableData?.length || 0,
  );
  for (let i = 0; i < length; i++) {
    const item = items.value?.item?.keywordTableData?.[i];
    const item1 = items.value?.item1?.keywordTableData?.[i];
    const item2 = items.value?.item2?.keywordTableData?.[i];
    if (item) {
      dataSource.value.push({
        item: items.value?.item,
        type: '本品',
        ...item,
      })
    }
    if (item1) {
      dataSource.value.push({
        item: items.value?.item1,
        type: '竞品1',
        ...item1,
      })
    }
    if (item2) {
      dataSource.value.push({
        item: items.value?.item2,
        type: '竞品2',
        ...item2,
      })
    }
  }
  // items.value?.item?.keywordTableData?.map((d, index) => {
  //   if (items.value?.item2 && items.value?.item2?.trendData) {
  //     dataSource.value.push({
  //       item: items.value?.item2,
  //       type: '竞品2',
  //       ...items.value?.item2?.trendData[index],
  //     })
  //   }
  //   if (items.value?.item1 && items.value?.item1?.trendData) {
  //     dataSource.value.push({
  //       item: items.value?.item1,
  //       type: '竞品1',
  //       ...items.value?.item1?.trendData[index],
  //     })
  //   }
  //   dataSource.value.push({
  //     item: items.value?.item,
  //     type: '本品',
  //     ...d,
  //   })
  // })
  dataSource.value.reverse();
}

const __option = getCurrentInstance()?.appContext.provides.option;
const handle = async () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    }
  }, __option)) {
    loading.value = true;
    const data = await SycmItemMonitor.assignItemsKeywordTableData(await SycmItemMonitor.getItems());
    if (!data) {
      message.error('获取数据失败,请重试！');
      loading.value = false;
      return;
    }
    console.log(data);
    items.value = data;
    calcColumns();
    calcDataSource();
    loading.value = false;
    visible.value = true;
  }
}
watch(() => showZs.value, (val) => {
  calcColumns();
  calcDataSource();
})
</script>

<template>
  <base-app>
    <a-button-group>
      <user style="margin-right: 0;"/>
      <a-button type="primary" size="small" @click="handle" :loading="loading">
        一键转化
      </a-button>
    </a-button-group>
    <user-login-modal v-model:login-visible="loginVisible"/>
    <custom-modal :title="`竞争-竞争商品-竞品分析-入店搜索词`" width="95%" style="top: 20px;"
                  v-model:visible="visible"
    >
      <template #headerRight>
        <SYCMCustomModalHeaderNotice/>
        <a-checkbox style="margin-left: 10px;" v-model:checked="showZs">显示指数</a-checkbox>
      </template>
      <div style="max-height: calc(100vh - 110px);min-height:750px;overflow-y: auto;">
<!--        <KPIChart :items="items" :show-zs="showZs"/>-->
        <base-table table-name="竞争-竞争商品-竞品分析-入店搜索词" :columns="columns" :data-source="dataSource"
                    :scroll="{
        // y:750,
        // x: 2300,
        y:740
      }"
        >
          <template #type="row">
            <a-tag v-if="row.type==='本品'" color="blue">{{ row.type }}</a-tag>
            <a-tag v-if="row.type==='竞品1'" color="green">{{ row.type }}</a-tag>
            <a-tag v-if="row.type==='竞品2'" color="orange">{{ row.type }}</a-tag>
          </template>
        </base-table>
      </div>

    </custom-modal>
  </base-app>
</template>

<style scoped>

</style>
